<!doctype html>
<html>
<head>
    <title>管理员</title>
    <mate charset="utf-8"></mate>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/table.css" rel="stylesheet">
    <link rel="icon" href="/img/favicon.ico" type="image/x-icon">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
        <style>

    </style>
</head>
<body>
<div class="container">
    <h4>
        <span class="text-primary">您好，</span><span id="user" class="text-primary"><%= user%></span>
    </h4>
    <div id="teachers" class="row">
        <table class="table table-bordered table-hover">
            <caption class="text-success"><strong>讲课列表</strong></caption>
            <tr class="text-info">
                <td class="text-center">序号</td>
                <td class="text-center">姓名</td>
                <td class="text-center">课程</td>
                <td class="text-center">总评分</td>
                <td class="text-center">评分人数</td>
                <td class="text-center">平均分</td>
                <td class="text-center">时间</td>
            </tr>
            <tr v-for="(item,index) in myData" class="background ">
                <td class="text-center">{{index+1}}</td>
                <td class="text-center">{{item.true_name}}</td>  
                <td class="text-center">{{item.class}}</td>
                <td class="text-center">{{item.total_score | number}}</td>
                <td class="text-center">{{item.all_people | number}}</td>
                <td class="text-center">{{item.average}}</td>
                <td class="text-center">

                    {{item.start_date | getDate}}
                </td>
            </tr>
            <tr v-show="myData.length==0">
                <td colspan="5" class="text-center">
                    <p>暂无数据</p>
                </td>
            </tr>

        </table>
    </div>

    <div class="row" id="users">
        <table class="table table-bordered table-hover">
            <caption class="text-success"><strong>用户列表</strong></caption>
            <tr class="text-info">
                <td class="text-center">序号</td>
                <td class="text-center">用户名</td>
                <td class="text-center">密码</td>
                <td class="text-center">名字</td>
                <td class="text-center">操作</td>
            </tr>
            <tr v-for="(item,index) in myData" class="background ">
                <td class="text-center">{{index+1}}</td>
                <td class="text-center">{{item.user_name}}</td>  
                <td class="text-center">{{item.password}}</td>
                <td class="text-center">{{item.true_name}}</td>
                <td class="text-center">
                    <button class="btn btn-danger btn-sm"
                        v-on:click="del(index)"
                        data-toggle="dialog" data-target="#layer"
                    >删除</button>
                </td>
            </tr>
            <tr v-show="myData.length!=0">
                <td colspan="5" class="text-right">
                    <button v-on:click="delAll()" class="btn btn-danger btn-sm">删除全部</button>
                </td>
            </tr>
            <tr v-show="myData.length==0">
                <td colspan="5" class="text-center">
                    <p>暂无数据</p>
                </td>
            </tr>

        </table>
    </div>


</div>

<script type="text/javascript">

        window.onload = function(){

            var usersdata = JSON.parse('<%- JSON.stringify(users)%>');//转义字符串
            var teacheersdata = JSON.parse('<%- JSON.stringify(teachers)%>');//转义字符串

            //创建实例对象 
            var users = new Vue({
                el:'#users',
                data:{
                    myData:usersdata.data
                },
                methods:{
                    /*
                    	@func : 删除用户
                    	@param : index 用户序号id
                     */
                    del:function(index){
                        //this.myData.splice(index,1);//将myData中index移 
                        //获取数据
                        // var id = index;
                        var username = this.myData[index].user_name;
                        // var password = this.myData[index].password;
                        // var name = this.myData[index].name;
                        // console.log(username);

                        //发送请求，操作数据库
                        $.ajax({
                            type:'GET',
                            url:'/admin/del',
                            data:{
                                username:username
                            },
                            success:function(result){
                                // console.log(result);
                                if(result.code == "1"){
                                    alert("删除成功!");
                                    location.reload();//页面刷新
                                }else{
                                    alert("删除失败!");
                                }
                            },
                            error:function(){
                                alert("网络错误");
                            },
                            complete:function(){
                                // console.log("complete");
                            }
                        })
                    },
                    /*
                        @func : 删除全部用户
                     */
                    delAll:function(){
                         $.ajax({
                            type:'GET',
                            url:'/admin/delAll',
                            data:{
                            },
                            success:function(result){
                                // console.log(result);
                                if(result.code == "1"){
                                    alert("全部删除成功!");
                                    location.reload();//页面刷新
                                }else{
                                    alert("删除失败!");
                                }

                            },
                            error:function(){
                                alert("网络错误");
                            },
                            complete:function(){
                                // console.log("complete");
                            }
                        })
                    }

                }
            });

            var teachers =new Vue({
                el:'#teachers',
                data:{
                    myData:teacheersdata.data  
                },
                methods:{

                },
                filters:{
                    number:function(val){
                        return Number(val);
                    },
                    getDate:function(val){
                        // console.log(typeof(val));
                        var date = new Date(val);
                        if(date.getFullYear()=="1970"){
                            return new Date().getFullYear()+"-"+(new Date().getMonth()+2);
                        }else{
                            return date.getFullYear()+"-"+(date.getMonth()+1);
                        }
                        
                    }
                }
            });
        }        
    </script>
</body>
</html>